<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
    <!-- Add custom CSS here -->
    <!-- Syntax highlighter CSS -->
    <link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-select.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/datepicker.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/font-awesome/css/font-awesome.css" />
    <!-- Page Specific CSS -->
    <link rel="stylesheet" type="text/css" href="css/morris-0.4.3.min.css" />
    <!-- Bootstrap core CSS end -->
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="stylesheet" type="text/css" href="css/guide.main.css" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="css/ie_hack.css" />
<![endif]-->
    <link rel="stylesheet" type="text/css" href="css/jquery.selectBox.css" />
    <!-- INSERT CUSTOM CSS HERE -->
    <style type="text/css">
      .indent4{margin-left:10px;}
      .indexes{font-style: italic;font-weight: bolder;color: red;}
    </style>
</head>
<body data-spy="scroll" data-target="#affix-nav">
    <div class="container">
        <!--------------------------------------------------------------------------------->
        <!-- NAV HEADER -->
        <div class="navHeader">
            <!-- BREADCRUM -->
            <div class="breadcrum pull-left"><i class="fa fa-lg fa-money"></i>&nbsp;&nbsp;User Guide </div>
            <!-- BREADCRUM END -->
            <div class="clearfix"></div>
        </div>
        <!-- NAV HEADER END -->
        <!--------------------------------------------------------------------------------->
        <!-- MAIN CONTENTS -->
        <div class="mainContent">

            <!--------------------------------------------------------------------------------->
            <div class="col-lg-12 contentControl">
                <div class="row">
                    <div class="col-xs-2">
                        <div class="row">
                            <nav id="affix-nav" class="sidebar col-md-12">
                                <ul class="nav sidenav" data-spy="affix" data-offset-top="10">
                                    <li><a href="#Download">Download</a></li>
                                    <li><a href="#Introduction">Introduction</a></li>
                                    <li><a href="#DependencyTracking">Dependency tracking</a></li>
                                    <li><a href="#SimpleList">Simple List</a></li>
                                    <li><a href="#ComplexList">Complex List</a></li>
                                    <li><a href="#ComplexList2">Complex List 2</a></li>
                                    <li><a href="#datePicker">Datepicker integration</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <div class="col-xs-10">
                        <div id="Download">
                            <h2>Download</h2>
                            <div class="content">
                                <div class="bs-example highlight">
                                    <a href="http://htmlengine.droppages.com/js/html.engine.js">Development version</a>
                                </div>
                            </div>
                        </div>
                        <div id="Introduction">
                            <h2>Introduction</h2>
                            <div class="content">
                                <div class="bs-example bs-example-tabs">
                                    <ul id="myTab" class="nav nav-tabs">
                                        <li class="active"><a href="#HW-Example" data-toggle="tab">Example</a></li>
                                        <li class=""><a href="#HW-HTML" data-toggle="tab">HTML</a></li>
                                        <li class=""><a href="#HW-JavaScript" data-toggle="tab">JavaScript</a></li>
                                    </ul>
                                    <div id="myTabContent" class="tab-content editor-parent">
                                        <div class="tab-pane fade active in example-tab" id="HW-Example">
                                          
                                        </div>
                                        <div class="tab-pane fade editor html-tab" id="HW-HTML">&lt;div id="helloWorld"&gt;&lt;/div&gt;</div>
                                        <div class="tab-pane fade js-tab" id="HW-JavaScript">var helloWorld = html.data('Hello world!');
html('#helloWorld')
  .input(helloWorld).clss('form-control').$()
  .br()
  .span(helloWorld).$();</div>
                                    </div>
                                    <div class="highlight">
                                      <h2>Explanation</h2>
                                      <p>
                                        Have you tried to edit text in the input? Amazing? <br />
                                        That's right! <br />
                                        If you're not familiar with any JavaScript data-binding framework. 
                                        You'll be blown away. <br />
                                        If you're, then this framework solve many problems you've faced.
                                        <br /><br />
                                        <strong style="color:red;">Please read this tutorial carefully line by line if you're not familiar with any JavaScript data-binding framework.<br />
                                        Try to modify as much as you can.
                                        For example: modify variable names, add more controls, remove some controls</strong>
                                        <br /><br />
                                        If you can't get what the framework does, don't hesitate to contact me at: <a href="mailto:nhan.aswigs@gmail.com">nhan.aswigs@gmail.com</a>
                                        <h3>Get started with html.data</h3>
                                        <div id="HW-javascript-editor">
                                          <pre name="code" class="js">
                                            var helloWorld = html.data('Hello world!');
                                            
                                            html('#helloWorld')
                                              .input(helloWorld).clss('form-control').$()
                                              .br()
                                              .span(helloWorld).$();
                                          </pre>
                                        </div>
                                        html.data will give you an observed object regardless of object's data type. <br />
                                        Whenever you change its value inside, all of subscribed element will be update. <br />
                                        The change can be made by changing input value or change by code. <br />
                                        You can try to modify initial value inside it to see what happen. e.g: <br />
                                        <strong>var helloWorld = html.data('Hello your name!');</strong><br />
                                        Line number 3 <strong>html('#helloWorld')</strong> will take the DOM element and render whatever you want from it. <br />
                                        Then you will see the structure after that is similar to HTML structure <br />
                                        You got input with its value, and the its classes<br />
                                        There is just one thing special here is $ sign at the end of each element. You may wonder what it is. <br />
                                        No, it's not jQuery sign as you think. It's just a function a notify end of the element tag like every element must has end tag. As the matter of fact, <strong>br</strong> tag is self closing tag so it doesn't have its end tag<br />
                                        Long explanation, right? Let go to the code. Try to change js code as below
                                        
                                        <pre name="code" class="js">
                                          var firstName = html.data('Jonny');
                                          var lastName = html.data('Tri Nguyen');
                                            html('#helloWorld')
                                            .input(firstName).clss('form-control').$().span(firstName).$()
                                            .br()
                                            .input(lastName).clss('form-control').$().span(lastName).$()
                                            .br()
                                            .span('Hello ').$().span(firstName).$().span(lastName).$();
                                        </pre>
                                        and the html not changed
                                        <pre name="code" class="html">
                                          <div id="helloWorld"></div>
                                        </pre>
                                        Now you can test your result. Your first name and last name change immediately right after your changes.
                                      </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="DependencyTracking">
                            <h2>Dependency Tracking</h2>
                            <div class="content">
                                <div class="bs-example bs-example-tabs">
                                    <ul class="nav nav-tabs">
                                        <li class="active"><a href="#DT-Example" data-toggle="tab">Example</a></li>
                                        <li class=""><a href="#DT-HTML" data-toggle="tab">HTML</a></li>
                                        <li class=""><a href="#DT-JavaScript" data-toggle="tab">JavaScript</a></li>
                                    </ul>
                                    <div class="tab-content editor-parent">
                                        <div class="tab-pane fade active in example-tab" id="DT-Example">
                                          
                                        </div>
                                        <div class="tab-pane fade editor html-tab" id="DT-HTML">&lt;div id="computed"&gt;&lt;/div&gt;</div>
                                        <div class="tab-pane fade js-tab" id="DT-JavaScript">var firstName = html.data('Jonny');
var lastName = html.data('Tri Nguyen');
var fullName = html.data(function(){
  return firstName() + ' ' + lastName();
});

html('#computed')
  .input(firstName).clss('form-control').$()
  .br()
  .input(lastName).clss('form-control').$()
  .span('Hello ').$()
  .span(fullName).$();</div>
                                    </div>
                                </div>
                                <div class="highlight">
                                  <h2>Explanation</h2>
                                  <p>
                                    In the previous example, you've tried bind first name and last name. <br />
                                    What if you want to display full name. If you create another observer named fullName <br />
                                    It could lead to another headache whenever user change firstName or lastName value. <br />
                                    To solve this problem, just pass a function into html.data. <br />
                                    <pre name="code" class="js">
                                      var fullName = html.data(function(){
                                        return firstName() + ' ' + lastName();
                                      });
                                    </pre>
                                    Now you're able to see the full name displayed in the end of paragraph. <br />
                                    However the problem is that you can't see full name updated after user change input value. <br />
                                    Now you just add some extra code to do that. Note that only replace from <strong>html('#computed')</strong>
                                    <pre name="code" class="js">
                                      html('#computed')
                                        .input(firstName).clss('form-control').refresh(fullName).$()
                                        .br()
                                        .input(lastName).clss('form-control').refresh(fullName).$()
                                        .br()
                                        .span('Hello ').$()
                                        .span(fullName).$();
                                    </pre>
                                  </p>
                                </div>
                            </div>
                        </div>
                        <div id="SimpleList">
                            <h2>Simple list</h2>
                            <div class="content">
                                <div class="bs-example">
                                  <strong>This feature is the most powerful of html engine</strong>
                                  <ul class="nav nav-tabs">
                                        <li class="active"><a href="#SimpleList-Example" data-toggle="tab">Example</a></li>
                                        <li class=""><a href="#SimpleList-HTML" data-toggle="tab">HTML</a></li>
                                        <li class=""><a href="#SimpleList-JavaScript" data-toggle="tab">JavaScript</a></li>
                                    </ul>
                                    <div class="tab-content editor-parent">
                                        <div class="tab-pane fade active in example-tab" id="SimpleList-Example">
                                          
                                        </div>
                                        <div class="tab-pane fade editor html-tab" id="SimpleList-HTML">&lt;div id="TestSimpleList"&gt;&lt;/div&gt;</div>
<div class="tab-pane fade js-tab" id="SimpleList-JavaScript">var addSP = function(e){
  smartPhone() !== '' && smartPhoneList.add(smartPhone());
  smartPhone('');
};

var smartPhone = html.data('');
var smartPhoneList = html.data([
  'Blackberry',
  'iPhone',
  'Lg g pro2'
]);
  
html('#TestSimpleList')  
  .span('Your item: ').$()
  .ul().each(smartPhoneList, function(sp, index){
    html(this).li(sp).$();
  }).$()
  
html('#TestSimpleList')
  .span('Add more smart phone: ').$()
  .input(smartPhone).clss('form-control').$()
  .button('Add').clss('btnViolet').click(addSP).$();</div>
                                    </div>
                                </div>
                                <div class="highlight">
                                  <h2 class="adSearchTitle">Explanation</h2>
                                  Firstly, declare view model for the page
                                  <pre name="code" class="js">var smartPhone = html.data('');
var smartPhoneList = html.data([
  'Blackberry',
  'iPhone',
  'Lg g pro2'
]);</pre>
                                  <strong>smartPhone</strong> variable will be bounded to the textbox <br />
                                  <strong>smartPhoneList</strong> will be bounded to the list of smart phones
                                  Secondly, render view from view model including a textbox for adding new smart phone and the list of smart phones
                                  <pre name="code" class="js">html('#TestSimpleList')
  .span('Your item: ').$()
  .ul().each(smartPhoneList, function(sp, index){
    html(this).li(sp).$();
  }).$()</pre>
                                  When you want to render a list, you render a parent node firstly, in this example it is <strong>ul</strong> node<br />
                                  Then use <strong>each</strong> method. This method takes 2 parameters: <br />
                                  <div class="indent4">
                                    <span class="indexes">1.</span> An array or an observed array (smartPhoneList in this case). <br />
                                    <span class="indexes">2.</span> A callback function to render the list.
                                      <div class="indent4">
                                        The callback function takes 2 parameters: 
                                          <div class="indent4">
                                            <span class="indexes">2.a.</span> An item in the list <br />
                                            <span class="indexes">2.b.</span> Item index
                                          </div>
                                        In the callback function, you must specific that you want to render from its parent node, say <strong>ul</strong> in the example. <br />
                                        You can use reference <strong>this</strong> to indicate that node. <br />
                                        NOTE: You can't use each method without a parent. <br />                          
                                      </div>
                                      <br/>
                                  </div>
                                  Great! Now you will want to add more smart phone into the list. So add an input as below.
                                  <pre name="code" class="js">html('#TestSimpleList')
  .span('Add more smart phone: ').$()
  .input(smartPhone).clss('form-control').$()
  .button('Add').clss('btnBlue').$()</pre>
                                  Ok now, but it doesn't work because you will need to add an behaviour for Add button. <br />
                                  Add that method <strong style="color:red;">on the top</strong> of code
                                  <pre name="code" class="js">var addSP = function(e){
  smartPhone() !== '' && smartPhoneList.add(smartPhone());
  smartPhone('');
}</pre>
                                  Modify Add button as below
                                  <pre name="code" class="js">.button('Add').clss('btn btn-small').click(addSP).$()</pre>
                                  Done! You can add a new one into smart phone list.<br /><br />
                                  
                                  You may ask me why depend too much on JavaScript but HTML code is just simply one line. <br />
                                  The answer is performance and beautiful fluent API. You'll find this framework is the fastest one ever for data-binding. <br />
                                  However the structure is not so strange for you. It's like html structure, you must open a tag, close that tag, set some attributes, classes and behaviours. I didn't invent any new things like custom attribute, too many custom attribute is just for DOM element recognition, setting and getting their values. With this framework, you never need to add extra useless attributes. <br />
                                  However, for those who want to reuse HTML code, I also let you bind value after. The technique called "late-binding".<br/>
                                  Copy HTML code and JavaScript code to see how late-binding works
                                  <pre name="code" class="html"><div id="TestSimpleList">
  Smart phone list: <br />
  <ul id="smartPhoneList">
    <li>Blackberry</li>
    <li>iPhone</li>
    <li>LG G Pro 2</li>
  </ul>

  <input type="text" class="form-control" id="txtSmartPhone" />
  <button id="addSmartPhone" class="btnBlue">Add</button>
</div></pre>
                                  And the JavaScript
                                  <pre name="code" class="js">var addSP = function(e){
  smartPhone() !== '' && smartPhoneList.add(smartPhone());
  smartPhone('');
};

var smartPhone = html.data('');
var smartPhoneList = html.data([
  'Blackberry',
  'iPhone',
  'Lg g pro2'
]);
  
html('#smartPhoneList').each(smartPhoneList, function(sp, index){
  html(this).li(sp).$();
}).$();
  
html('#txtSmartPhone').val(smartPhone).$();
html('#addSmartPhone').click(addSP).$();
</pre>
                                </div>
                            </div>
                        </div>
                        <div id="ComplexList">
                            <h2>Complex list</h2>
                            <div class="content">
                                <div class="bs-example">
                                  The list with some behaviours
                                  <ul class="nav nav-tabs">
                                        <li class="active"><a href="#ComplexList-Example" data-toggle="tab">Example</a></li>
                                        <li class=""><a href="#ComplexList-HTML" data-toggle="tab">HTML</a></li>
                                        <li class=""><a href="#ComplexList-JavaScript" data-toggle="tab">JavaScript</a></li>
                                    </ul>
                                    <div class="tab-content editor-parent">
                                        <div class="tab-pane fade active in example-tab" id="ComplexList-Example" />
                                          
                                        </div>
                                        <div class="tab-pane fade editor html-tab" id="ComplexList-HTML">&lt;div id="TestList"&gt;&lt;/div&gt;</div>
<div class="tab-pane fade js-tab" id="ComplexList-JavaScript">var vm = {
  FirstName: 'Jonny',
  LastName: 'Tri Nguyen',
  Children: html.data([
    {Name: 'Anderson', Age: 30},
    {Name: 'Peter', Age: 20},
  ]),
  Counter: html.data(function(){
    return vm.Children().length;
  }),
  deletePerson: function(e, model){
    vm.Children.remove(model);
  }
};

html('#TestList')
  .span(vm.FirstName).$().space(1).span(vm.LastName).$().space(1)
  .span('and his children').$()
  .br()
  .div().each(vm.Children, function(child, index){
    html(this)
      .span('Name: ').$().span(child.Name).$().space(2)
      .span('Age: ').$().span(child.Age).$()
      .button('Delete').click(vm.deletePerson, child).clss('btnViolet').$()
      .br();
  });</div>
                                    </div>
                                </div>
                                <div class="highlight">
                                  <h2 class="adSearchTitle">Explanation</h2>
                                  Firstly, you declare view model for the page. <br />
                                  They are the name of a person and his children. <br />
                                  Here we define a class for a child, just for creating object convenience.
                                  <pre name="code" class="js">var vm = {
  FirstName: 'Jonny',
  LastName: 'Tri Nguyen',
  Children: html.data([
    {Name: 'Anderson', Age: 30},
    {Name: 'Peter', Age: 20},
  ])
};</pre>
                                  Then you render the person and his children. <br />
                                  <strong>NOTE: </strong> space method will add spaces for you.
                                  The code below may slightly different from original code, but they are actually the same rendering ways.
                                  <pre name="code" class="js">html('#TestList')
.span(vm.FirstName).$().space(1).span(vm.LastName).$().space(1)
.span('and his children').$()
.br();

html('#TestList')
.div().each(vm.Children, function(child, index){
  html(this)
    .span('Name: ').$().span(child.Name).$().space(2)
    .span('Age: ').$().span(child.Age).$()
    .button('Delete').clss('btnBlue').$()
    .br();
}).$()</pre>
                                  Great! Now you rendered everything. Let's put some behaviours for delete buttons. <br />
                                  Add a behaviour into view model like so
                                  <pre name="code" class="js">var vm = {
  FirstName: 'Jonny',
  LastName: 'Tri Nguyen',
  Children: html.data([
    {Name: 'Anderson', Age: 30},
    {Name: 'Peter', Age: 20},
  ]),
  deletePerson: function(e, model){
    vm.Children.remove(model);
  }
};
                                  </pre>
                                  Modify button code as below.
                                  <pre name="code" class="js">
                                    .button('Delete').click(vm.deletePerson, child).clss('btnBlue').$()
                                  </pre>
                                  You may wonder why do need to pass extra <strong>child</strong> parameter to click event. <br />
                                  It's so strange and not like jQuery way (lol). <br />
                                  No, you're not forced to put that parameter in case you know what object you want to work with. <br />
                                  In the previous example, you know that is <strong>smartPhone</strong> variable <br />
                                  However in this case, you have no idea about which child you want delete. <br />
                                  Then you want to get that parameter, it right there for you in the callback function (say <strong>
                                  deletePerson</strong>). <br />
                                  All you need to do is just delete it from the list. <br />
                                  The framework will handle removing action for you. <br />
                                  As you can tell, after clicking on the button, magic happens, that person is removed without any effort of manipulating DOM element.
                                </div>
                            </div>
                        </div>
                        <br />
                        <div id="ComplexList2">
                            <h2>Complex List 2</h2>
                            <div class="content">
                              <div class="bs-example">
                                <strong>This is a real world example. This example is one of Knockout tutorial lessons.</strong>
                                <ul id="myTab" class="nav nav-tabs">
                                    <li class="active"><a href="#CL2-Example" data-toggle="tab">Example</a></li>
                                    <li class=""><a href="#CL2-HTML" data-toggle="tab">HTML</a></li>
                                    <li class=""><a href="#CL2-JavaScript" data-toggle="tab">JavaScript</a></li>
                                </ul>
                                <div id="CL2Content" class="tab-content editor-parent">
                                    <div class="tab-pane fade active in example-tab" id="CL2-Example">
                                      
                                    </div>
                                    <div class="tab-pane fade editor html-tab" id="CL2-HTML">&lt;div id="meal-reservation"&gt;&lt;/div&gt;</div>
<div class="tab-pane fade js-tab" id="CL2-JavaScript">
// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = html.data(name);
    self.meal = html.data(initialMeal);

    self.formattedPrice = html.data(function() {
        var price = self.meal().price;
        return price ? "$" + price.toFixed(2) : "None";        
    });    
}

// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
    var self = this;

    // Non-editable catalog data - would come from the server
    self.availableMeals = [
        { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ];    

    // Editable data
    self.seats = html.data([
        //new SeatReservation("Steve", self.availableMeals[0]),
        //new SeatReservation("Bert", self.availableMeals[1])
    ]);
    self.seats.add(new SeatReservation("Steve", self.availableMeals[0]));
    self.seats.add(new SeatReservation("Bert", self.availableMeals[1]), 0);

    // Computed data
    self.totalSurcharge = html.data(function() {
       var total = 0;
       for (var i = 0; i < self.seats().length; i++)
           total += self.seats()[i].meal().price;
       return total.toFixed(2);
    });

    self.totalDiscount = html.data(function() {
       return (self.totalSurcharge()*90/100).toFixed(2);
    });
    
	self.seatNum = html.data(function(){
		return self.seats().length;
	});

    // Operations
    self.addSeat = function() {
        self.seats.add(new SeatReservation("", self.availableMeals[0]));
    }
    self.removeSeat = function(e, seat) { self.seats.remove(seat) }
}
var vm = new ReservationsViewModel();

html('#meal-reservation')
    .span('Your seat reservations ').span(vm.seatNum).clss('red').$().$()
    .br()
    .span('Total surcharge ').span(vm.totalSurcharge).clss('red').$().$()
    .br()
    .span('Total discounted ').span(vm.totalDiscount).clss('red').$().$()
    .br()
    .button('Add seat').click(vm.addSeat).clss('btnNormal').f5(vm).$()
    .br()
    .table()
        .thead().tr().th('Passenger name').$().th('Meal').$().th('Surcharge').$().$().$()
        .tbody()
            .each(vm.seats, function(seat){
            html.tr()
                .td().input(seat.name).$().$()
                .td()
                .dropdown(vm.availableMeals, seat.meal, 'mealName').f5(seat, vm).$()
                .$()
                .td().span(seat.formattedPrice).$().$()
                .td().button('Remove').clss('btnViolet').click(vm.removeSeat, seat).refresh(vm).$().$()
            .$()
            })
        .$()
    .$()
</div>
                                </div>
                              </div>
                                    <div class="highlight">
                                      <h2>Explanation</h2>
                                      Is that an complex example? Don't worry, I will explain you step by step. It'll take you 5-10 minutes to get it. <br /> 
                                      First of all, add a list of seat reservations without any behaviours.
                                      
                                      <pre name="code" class="js">
// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = html.data(name);
    self.meal = html.data(initialMeal);

    self.formattedPrice = html.data(function() {
        var price = self.meal().price;
        return price ? "$" + price.toFixed(2) : "None";        
    });
}

//Viewmodel for the page, along with initial state
function ReservationsViewModel() {
    var self = this;

    // Non-editable catalog data - would come from the server
    self.availableMeals = [
        { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ];    

    // Editable data
    self.seats = html.data([]);
    self.seats.push(new SeatReservation("Steve", self.availableMeals[0]));
    self.seats.push(new SeatReservation("Bert", self.availableMeals[1]));
}
var vm = new ReservationsViewModel();
</pre>
And here is the rendering code (aka the View in MVVM)
<pre name="code" class="js">
html.render('#meal-reservation')
    .table()
		.thead().tr().th('Passenger name').$().th('Meal').$().th('Surcharge').$().$().$()
		.tbody()
			.each(vm.seats, function(seat){
				html.tr()
					.td().input(seat.name).$().$()
					.td()
						.dropdown(vm.availableMeals, seat.meal, 'mealName').$()
					.$()
					.td().span(seat.formattedPrice).$().$()
				.$()
			})
		.$()
	.$()
                                      </pre>
                                      Well done! You got a meal reservation list with initial values. <br />
                                      Now you will add some computed properties. <br />
                                      Add to ReservationsViewModel the following code:
                                      <pre name="code" class="js">
function ReservationsViewModel() {
    //...previous code
    
    // Computed data
    self.totalSurcharge = html.data(function() {
       var total = 0;
       for (var i = 0; i < self.seats().length; i++)
           total += self.seats()[i].meal().price;
       return total.toFixed(2);
    });
    
    self.totalDiscount = html.data(function() {
       return (self.totalSurcharge()*90/100).toFixed(2);
    });
    
    self.seatNum = html.data(function(){
        return self.seats().length;
    });
}
                                      </pre>
                                      And you modify the View.
<pre name="code" class="js">
//html('#meal-reservation')
    .span('Your seat reservations ').span(vm.seatNum).clss('red').$().$()
    .br()
    .span('Total surcharge ').span(vm.totalSurcharge).clss('red').$().$()
    .br()
    .span('Total discounted ').span(vm.totalDiscount).clss('red').$().$()
    .br()
//.table()
//....
</pre>
                                Now you got some useful information numbers from the list. <br />
                                If you want that these numbers to be live updated. Then you need to add some behaviours like "Add" or "Remove".<br />
                                The "Add" behaviour
<pre name="code" class="js">
//  .h2('Total discount ').span(vm.totalDiscount).$().$()
//	.br()
	.button('Add seat').click(vm.addSeat).refresh(vm).$()
	.br()
//.table()
//..
</pre>
                                After declaring, add that behaviours into ViewModel as following:
<pre name="code" class="js">
function ReservationsViewModel() {
    //...previous code
    
    // Operations
    self.addSeat = function() {
        self.seats.add(new SeatReservation("", self.availableMeals[0]));
    }
}
</pre>
                                Just a little more. Add refresh method after dropdown to refresh data when changing selected item.
<pre name="code" class="js">
//...previous code
//.td()
    .dropdown(vm.availableMeals, seat.meal, 'mealName').refresh(seat, vm).$()
//$()
//...
</pre>
                                Now, an assignment for you.<br />
                                Take a look at the original code and add "Remove" behaviour to the list.
                                    </div>
                            </div>
                        </div>
                        <div id="datePicker">
                            <h2>Date picker Integration</h2>
                            <div class="content">
                                <div class="bs-example">
                                    Integrate easily with any jQuery controls.
                                    <ul class="nav nav-tabs">
                                        <li class="active"><a href="#DP-Example" data-toggle="tab">Example</a></li>
                                        <li class=""><a href="#DP-HTML" data-toggle="tab">HTML</a></li>
                                        <li class=""><a href="#DP-JavaScript" data-toggle="tab">JavaScript</a></li>
                                    </ul>
                                    <div class="tab-content editor-parent">
                                        <div class="tab-pane fade active in example-tab" id="DP-Example">
                                          
                                        </div>
                                        <div class="tab-pane fade editor html-tab" id="DP-HTML">&lt;input id="datepicker" /&gt;</div>
                                        <div class="tab-pane fade editor js-tab" id="DP-JavaScript">html.datepicker = function(observerdDate) {
    var currentElem = this.element();  
    $(currentElem).datepicker({format:'dd/mm/yyyy'}).on('changeDate', function(e){  
        observerdDate($(currentElem).data('datepicker').date);
    });
    return this;
}
var date = html.data(new Date());
html('#datepicker').datepicker(date).$()
.br()
.span(date).$();</div>
                                    </div>
                                </div>
                                <div class="highlight" style="height: 200px;">
                                
                                </pre>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
        <!-- MAIN CONTENTS END -->
        <!---------------------------------------------------------------------->
        <!-- EXAMPLE MODAL -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm customModal">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">... </div>
                    <div class="modal-footer">
                        <button type="button" class="btnNormal" data-dismiss="modal">Close</button>
                        <button type="button" class="btnNormal">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- EXAMPLE MODAL END-->
    </div>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/jquery.selectBox.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap-select.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="bootstrap/js/jquery.bootstrap-growl.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.datepicker').datepicker({ format: 'dd/mm/yyyy' }).on('changeDate', function (e) {
                (e.viewMode == 'days') ? $(this).datepicker('hide') : '';
            });
            $("#popDialog").click(function () {
                $.bootstrapGrowl("This is test.", {
                    type: 'info',
                    offset: { from: 'bottom', amount: 20 },
                    delay: 4000
                });
            });
            $("#popDialog2").click(function () {
                $.bootstrapGrowl("This is test 2.", {
                    type: 'info',
                    offset: { from: 'bottom', amount: 20 },
                    delay: 4000
                });
            });
        });
</script>
    <!-- PAGE SPECIFIC PLUGINS -->
    <script type="text/javascript" src="js/raphael-min.js"></script>
    <script type="text/javascript" src="js/morris-0.4.3.min.js"></script>
    <script type="text/javascript" src="js/slideDock.js"></script>
    <!-- INSERT CUSTOM JAVASCRIPT HERE -->
    <!-- INSERT CUSTOM JAVASCRIPT HERE -->

    <!-- INSERT CUSTOM JAVASCRIPT HERE END -->
    <script type="text/javascript" src="js/custom.advandsearch.js"></script>
    <script type="text/javascript" src="bootstrap/js/respond.min.js"></script>
    <script type="text/javascript" src="js/spin.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/shCore.js"></script>
    <script type="text/javascript" src="js/shBrushJScript.js"></script>
    <script type="text/javascript" src="js/shBrushCss.js"></script>
    <script type="text/javascript" src="js/shBrushXml.js"></script>
    <script type="text/javascript" src="../../trunk/src/html.engine.js"></script>
    <script type="text/javascript" src="js/editor/ace.js"></script>
    <script type="text/javascript" src="js/code-editor.js"></script>
</body>
</html>

